<template>
  <div class="myRadioBtn">
    <el-radio-group
      :ref="radioBtnRef"
      @change="radioBtnChange(childModel)"
      :size="configDefault.size"
      :fill="configDefault.fill"
      :text-color="configDefault.textColor"
      v-model.lazy="childModel"
    >
      <el-radio-button
        v-for="(item, index) in configDefault.options"
        :key="index"
        :disabled="item.disabled"
        :label="item[configDefault.props.value]"
      >
        <span>{{ item[configDefault.props.label] }}</span>
      </el-radio-button>
    </el-radio-group>
  </div>
</template>

<script>
import { getComboData } from "@/components/api/fromSource.js";
import XEUtils from "xe-utils";
export default {
  name: "myRadioBtn",
  props: {
    radioBtnRef: {
      type: String,
      default() {
        return "vueRadioBtn";
      },
    },
    model: {
      // 当前组件绑定值
      type: [String, Number, Boolean, Array],
      require: true,
    },
    modelKey: {
      //当前绑定值key，可以用于formData中获取到当前组件渲染配置items
      type: String,
      default() {
        return "";
      },
    },
    fromSource: {
      //用于formData中获取到当前组件渲染配置items
      type: [Array, String],
      default() {
        return "";
      },
    },
    which: {
      //第几组单选框按钮
      type: [String, Number],
      default() {
        return 1;
      },
    },
    disabled: {
      // 当前组件是否禁用
      type: Boolean,
      default() {
        return false;
      },
    },
    config: {
      //私有配置数据
      type: [String, Object],
      require: true,
    },
    formConfigData: {
      //配置数据
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      childModel: this.model ? this.model : "",
      configDefault: {
        isCustomData: true,
        options: [],
        props: {
          // 当前选项配置 {label:'显示文本值',value:'当前选项绑定值'}
          label: "label",
          value: "id",
        },
        size: "medium", //按钮大小： ""、medium、small、mini
        fill: "#409EFF",
        textColor: "#fff",
      },
    };
  },
  watch: {
    childModel(val, oldVal) {
      if (val !== oldVal) {
        this.$emit("update:model", val);
      }
    },
    model(val, oldVal) {
      if (val !== this.childModel) {
        this.childModel = val;
      }
    },
    formConfigData: {
      handler(newVal) {
        let formConfigObj = newVal
          ? newVal[this.fromSource] || newVal[this.modelKey]
          : {};
        let publicConfigObj = newVal ? newVal["publicAttr"] : {};
        let cfg =
          this.config && XEUtils.isString(this.config)
            ? XEUtils.toStringJSON(this.config)
            : this.config || {};
        this.configDefault = XEUtils.merge(
          this.configDefault,
          publicConfigObj,
          cfg,
          formConfigObj
        );
      },
      deep: true,
      immediate: true,
    },
  },
  created() {},
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      if (!this.configDefault.isCustomData) {
        let params = { elementCode: this.fromSource || this.modelKey };
        getComboData(params).then((res) => {
          this.initRadioBtnData(res.data);
        });
      }
    },
    initRadioBtnData(data) {
      this.configDefault.options = data && data.length > 0 ? data : [];
    },
    radioBtnChange: function (newVal) {
      // 当绑定值变化时触发的事件
      this.$emit("changeCallback", this.modelKey + "_" + this.which, newVal);
    },
  },
};
</script>

<style lang="less"></style>
